<template>
  <view class="statistics-result">
    <template v-for="(item, index) in dataList" :key="index">
      <StatisticsCard
        :serialNumber="index + 1"
        :label="item.showName"
        :filledNum="item.filledNum"
        :ratio="item.ratio"
        :sum-num="item.sumNum"
        :to-detail="item.itemSelectStatisticsVo === null"
        @detail="() => handleDetail(item)"
      >
        <template v-if="item.itemSelectStatisticsVo?.length">
          <SelectStatistics
            v-for="(itemSelect, index) in item.itemSelectStatisticsVo"
            :key="index"
            :label="itemSelect.answerName"
            :num="itemSelect.num"
            :ratio="itemSelect.ratio"
          >
            "
          </SelectStatistics>
        </template>
      </StatisticsCard>
    </template>
    <Empty v-if="!dataList.length"></Empty>
  </view>
</template>
<script setup lang="ts">
  import StatisticsCard from './StatisticsCard/index.vue';
  import SelectStatistics from './SelectStatistics/index.vue';
  import { onMounted, ref } from 'vue';
  import type { FormStatistics } from '@/api/serviceForm/types';
  import { formStatisticsList } from '@/api/serviceForm';
  import { navigateTo } from '@/router';
  import Empty from '@/components/Empty/Empty.vue';
  const props = defineProps({
    serviceTicketFormId: {
      type: Number,
      default: 0,
    },
  });

  const emtis = defineEmits(['detail']);

  const dataList = ref<FormStatistics[]>([]);

  onMounted(() => {
    queryFormStatisticsList();
  });

  const queryFormStatisticsList = async () => {
    dataList.value = await formStatisticsList(props.serviceTicketFormId);
  };

  const handleDetail = (item: FormStatistics) => {
    navigateTo({
      name: 'statisticsDetail',
      options: {
        title: item.showName,
        serviceTicketFormId: item.serviceTicketFromId,
        id: item.id,
      },
    });
  };
</script>
<style lang="scss" scoped>
  .statistics-result {
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
  }
</style>
